<template>
  <div class="wft-senior-form-contextmenu-panel" :style="panelPositionStyle">
    <div @click="clearFormPanel">清空画板</div>
  </div>
</template>
<script>
import Bus from '../../../utils/bus'
export default {
  props: {
    top: {
      type: [Number, String],
      default: 0
    },
    bottom: {
      type: [Number, String],
      default: 0
    },
    left: {
      type: [Number, String],
      default: 0
    },
    right: {
      type: [Number, String],
      default: 0
    },
    curComp: {
      type: Object,
      required: true
    },
    id: {
      type: String,
      default: ''
    }
  },
  computed: {
    panelPositionStyle() {
      return {
        top: typeof this.top == 'number' ? this.top + 'px' : this.top,
        bottom: typeof this.bottom == 'number' ? this.bottom + 'px' : this.bottom,
        left: typeof this.left == 'number' ? this.left + 'px' : this.left,
        right: typeof this.right == 'number' ? this.right + 'px' : this.right,
      }
    }
  },
  methods: {
    // 清空画板
    clearFormPanel() {
      this.curComp.children = []
      Bus.$emit('addStack')
    }
  }
}
</script>
<style scoped>
.wft-senior-form-contextmenu-panel {
  width: 150px;
  border: 1px solid #eee;
  border-radius: 3px;
  -webkit-box-shadow:0 0 10px #eee;
  -moz-box-shadow:0 0 10px #eee;
  box-shadow:0 0 10px #eee;
  z-index: 99;
  position: absolute;
  background-color: #fff;
  padding: 5px 0;
}

.wft-senior-form-contextmenu-panel > div {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 13px;
  padding: 0 12px;
  box-sizing: border-box;
  cursor: pointer;
}
.wft-senior-form-contextmenu-panel > div:hover {
  background-color: #4393e6;
  color: #fff;
}
</style>
